<template>

    <div class="shop-cart">
    	<div class="cart-top">
    		<ul class="no-style" style="line-height: 54px;">
    			
    			<!-- 商品信息 -->
    			<li class="item-info">
    				<div>
						<div style="width: 30%;height: 100%"></div>
    					<span>商品信息</span>
    				</div>
    			</li>
    			<!-- 数量 -->
    			<li class="item-num">
    				<div>
    					数量
    				</div>
    			</li>
    			<!-- 单价 -->
    			<li class="item-price">
    				<div>
    					单价
    				</div>
    			</li>
    			<!-- 金额 -->
    			<li class="item-totalprice">
    				<div>
    					金额
    				</div>
    			</li>
    			
    		</ul>
    		<!-- 商品主体 -->
    		<ul class="no-style" v-for="item in settlebooklist" :key="item.id">
    			
    			<!-- 商品信息 -->
    			<li class="item-info">
    				<div picture style="float:left; width: 24%;max-width: 30%;line-height: 0">
    					<img :src="item.img" alt="" style="width: 100%">
    				</div>
    				<div style="float:left;width: 70%;">
    					{{ item.title }}
    				</div>
    			</li>
    			<!-- 数量 -->
    			<li class="item-num">
    				<div>
    					<span>{{ item.num }}</span>
    				</div>
    			</li>
    			<!-- 单价 -->
    			<li class="item-price">
    				<div>
    					{{ item.price }}
    				</div>
    			</li>
    			<!-- 金额 -->
    			<li class="item-totalprice">
    				<div>
    					{{ $realPrice($realPrice(item.num) * $realPrice(item.price))}}
    				</div>
    			</li>
    			
    		</ul>
    	</div>
    	<!-- 总价和结算按钮 -->
    	<div class="cart-bottom">
			<span class="pricetips">合计:</span>
			<span class="pricetips" style="color: red;">￥</span>
    		<span class="price">{{ total_price }}</span>
    		<a href="" class="no-style" @click.prevent="settle()">付款</a>
    	</div>
    </div>

</template>

<script>
import {mapState,mapGetters,mapMutations} from "vuex"
export default ({
    name:'settleaccount',
    data:function(){
      return {
        settlebooklist:[],//{title: ,num: ,price: ,tprice:num*price}
      }
    },
    computed:{
        total_price() {
        	let total_price = 0;
        	for (let item of this.settlebooklist) {
        		total_price += Number(item.num)*Number(item.price)
        	}
        	return this.$realPrice(total_price)
        },
        ...mapState('cart',[
          'paylist',
          'shop_cart',
        ]),
        ...mapState('logreg',[
          'active_user',
        ])
    },
    methods:{
		...mapMutations('cart',[
			'pay',
		]),
		get_items() {
			for (let item of this.shop_cart[this.active_user]){
				this.paylist.indexOf(item.id) != -1 ? this.settlebooklist.push(item) : {};
			}
		},
  // 点击结算按钮
		settle(){
			this.$messagebox.confirm('你有钱嘛，就支付？','支付',{
				confirmButtonText: '有',
				cancelButtonText: '没有'
			})
			.then(() => {
				this.$messagebox.alert('对不起，有眼不识泰山！已为您清空结算表单，欢迎再次购物','我的错')
				.then(() => {
					this.pay({username: this.active_user})
					this.$router.replace('/home')
					location.reload()
				})
			})
			.catch(() => {
				this.$messagebox.alert('没钱看什么,XXX快去搬砖','就这？')
			})
		}
  	},
	created() {
		this.get_items()
	}

})
</script>



<style scoped lang="less">
	.shop-cart {
		border: solid white 1px;
		margin-top: 2rem;
		overflow: hidden;
		text-align: center;
		width: 100%;
		min-width: 1000px;
		
		.cart-top {
			overflow: hidden;
			
			
			.item-info {
				width: 50%;
			}
			.item-num {
				width: 17%;
				position: relative;
				display: block;
				
				
			}
			.item-price {
				width: 17%;
			}
			.item-totalprice {
				width: 16%;
			}

			ul {
				overflow:hidden;
				line-height: 160px;
				border-top:  solid 1px;
				border-color: rbga(0,0,0,.5);
				
				li {
					float: left;
					
				}
			}
		}
		
		.cart-bottom {
			position: absolute;
			right: 12%;
			min-width: 15em;
			font-family:sans-serif;
			margin:12px;
			border:1px dashed burlywood;
			padding:8px 25px 8px 25px;
			font-weight:800;
			letter-spacing:1px;
		
			span.pricetips {
				font-size: 16px;
				color: black;
			}		
			span.price {
				font-size: 30px;
				margin-right: 2rem;
				color: red;
			}
			a {
				font-size: 24px;
				position: relative;
				bottom: -1px;
				display: inline-block;
				line-height: 52px;
				height: 50px;
				background-color: rgb(171, 190, 62);
				padding: 0px 36px;
				border-radius: 6px;
				margin-top: 10px;
			}
		}
		.cart-bottom:after {
			position: absolute;
			top:2px;
			left:2px;
			content: '';
			height:100%;
			width:100%;
			z-index:-1;
			transform: rotate(2deg);
			background:white; 
			border-radius: 3px;
		}
		.cart-bottom:hover {
			transform: rotate(-0.5deg);
		}
		
	}
</style>